<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">    
    <meta name="format-detection" content="telephone=no, email=no">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="描述1">
    <meta name="keywords" content="描述1">
    <title>Document</title>
    <style>
        /* 用于完全解决由支持双击缩放手势引起的点击事件的延迟 */
        html {
            touch-action: manipulation;
        }
		table{
			width:960px;
			height:100%;
			margin:10px auto;
		}
		.thead-div{
			height:60px;
			border:1px solid #ccc;
		}
		.tbody-div{
			height:1000px;
			background:#e7e7e7;
			border:1px dashed blue;
		}
		.box{
			height: 200px;
			width: 200px;
			display: table-cell;
			text-align: center;
			border: 1px solid #ccc;
			vertical-align: middle;
		}
		.box-t{
			font-size:0;
		}
		.box-t span{
			font-size:16px;
		}
    </style>
</head>

<body>
	<div style="margin:0 auto;min-height:1200px;border:1px solid red;width:980px;display:none;">
	<table>
		<thead>
			<tr>
				<td>
					<div class="thead-div">
					表头。。。
					</div>
				</td>
				<td>
					<div class="thead-div">
					表头。。。
					</div>
				</td>
				
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<div class="tbody-div">
					表内容22。。。
					</div>
				</td>
				<td>
					<div class="tbody-div">
					表内容22。。。
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="tbody-div">
					表内容。。。
					</div>
				</td>
				<td>
					<div class="tbody-div">
					表内容22。。。
					</div>
				</td>
			</tr>
		</tbody>
	</table>
	</div>
	<div style="display:table;height:300px;width:600px;margin:0 auto;background:hotpink;">
		<div style="background:yellowgreen;height:320px;"></div>
	</div>
	

	<div class="box">
		<img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg" >
	</div>
	<div style="height:10px;"></div>
	<div class="box">
		<span>水平垂直居中</span>
		<p>水平垂直居中</p><p>水平垂直居中</p>
	</div>
	<div  class="box-t">
		<span>水平垂直居中</span>
		<span>水平垂直居中</span>
		<span>水平垂直居中</span>
		<span>水平垂直居中</span>
		<span>水平垂直居中</span>
		<span>水平垂直居中</span>
	</div>

</body>

</html>